<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" size="mini" class="form-filter">
      <el-form-item label="">
        <el-input
          v-model="formItem.s_name"
          placeholder="请输入名称..."
          clearable
          @keyup.enter.native="search"
          @change="onMixedInputChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
        <!-- <el-button plain icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { options as categoryOptions } from '@neu/cmdb-ui/api/category'

// 定义一个查询表单原始项
const formItem = {
  s_category: null,
  s_name: ''
}

export default {
  name: 'SchemasTableFilter',
  data() {
    return {
      formItem: { ...formItem },
      availableCategories: null
    }
  },
  methods: {
    // 复合型输入框 input 值改变事件
    onMixedInputChange(value) {
      if (value === '') {
        this.search()
      }
    },
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = { ...formItem }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    loadOptions({ action }) {
      if (action === 'LOAD_ROOT_OPTIONS') {
        return categoryOptions().then(response => {
          this.availableCategories = response.data
        })
      }
    },
    selcetCate(node) {
      this.formItem.s_category = node.value
      this.$parent.filter(this.formItem)
    },
    inputCate(value) {
      if (value === undefined) {
        this.formItem.s_category = null
      }
    }
  }
}
</script>
